<template>
  <div>
    <page-header> </page-header>
    <pageMain padding="0px" background="transparent">
      <chunkTitle title="基本信息" border></chunkTitle>

      <div class="chunk">
        <div class="base-form">
          <el-form
            ref="form"
            :model="addMenuForm"
            label-width="160px"
            label-position="left"
            size="small"
          >
            <el-form-item label="父级菜单" size="small">
              <el-select v-model="addMenuForm.pid" placeholder="用户状态">
                <el-option></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="菜单类型" size="small">
              <el-select
                v-model="addMenuForm.type"
                placeholder="请选择菜单类型"
              >
                <el-option
                  v-for="state in $dictionary.get('MENU_TYPE')"
                  :label="state.label"
                  :value="state.value"
                  :key="state.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="菜单名称(title)" size="small">
              <el-input v-model="addMenuForm.title" size="small"></el-input>
            </el-form-item>

            <el-form-item label="英文名称(name)">
              <el-input v-model="addMenuForm.name" size="small"></el-input>
            </el-form-item>

            <el-form-item label="访问路径">
              <el-input v-model="addMenuForm.path" size="small">
                <template slot="prepend">/</template>
              </el-input>
            </el-form-item>

            <el-form-item label="文件地址" v-if="addMenuForm.type == 0 || addMenuForm.type == 2">
              <el-input v-model="addMenuForm.filePath" size="small">
                <template slot="prepend">/src/pages/</template>
                <template slot="append">.vue</template>
              </el-input>
            </el-form-item>
            <el-form-item label="菜单图标" v-if="addMenuForm.type != 2">
              <icon
                popover
                @select="selectNormalIcon"
                :icon="addMenuForm.icon_nomal"
              ></icon>
            </el-form-item>

            <el-form-item label="激活图标" v-if="addMenuForm.type != 2">
              <icon
                popover
                @select="selectActiveIcon"
                :icon="addMenuForm.icon_active"
              ></icon>
            </el-form-item>
            <el-form-item label="菜单箭头显示" v-if="addMenuForm.type != 2">
              <el-switch v-model="addMenuForm.right_arrow_show"> </el-switch>
            </el-form-item>
            <el-form-item label="侧边栏中显示" v-if="addMenuForm.type != 2">
              <el-switch v-model="addMenuForm.navigator_show"> </el-switch>
            </el-form-item>
            <el-form-item label="面包屑中显示" v-if="addMenuForm.type != 2">
              <el-switch v-model="addMenuForm.breadcrumbs_show"> </el-switch>
            </el-form-item>

            <el-form-item label="页面缓存">
              <el-switch v-model="addMenuForm.keep_alive"> </el-switch>
            </el-form-item>
            <el-form-item label="重定向" v-if="addMenuForm.type != 2">
              <el-switch v-model="addMenuForm.redirect_state"> </el-switch>
            </el-form-item>
            <template
              v-if="addMenuForm.type != 2 && addMenuForm.redirect_state"
            >
              <el-form-item label="重定向跳转方式">
                <el-select
                  v-model="addMenuForm.redirect_type"
                  placeholder="请选择重定向方式"
                >
                  <el-option
                    v-for="state in $dictionary.get('MENU_REDIRECT')"
                    :label="state.label"
                    :value="state.value"
                    :key="state.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="重定向跳转菜单/地址">
                <el-input
                  v-model="addMenuForm.redirect_url"
                  size="small"
                  placeholder="请输入重定向地址"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="重定向跳转方式"
                v-if="addMenuForm.redirect_type == 0"
              >
                <el-select
                  v-model="addMenuForm.redirect_target"
                  placeholder="请选择重定向方式"
                >
                  <el-option label="外跳转" :value="1"></el-option>
                  <el-option label="内跳转" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </template>

            <el-form-item label="徽标" v-if="addMenuForm.type != 2">
              <el-input
                v-model="addMenuForm.buoy"
                size="small"
                placeholder="请输入徽标内容"
              ></el-input>
            </el-form-item>

            <el-form-item label="默认展开" v-if="addMenuForm.type != 2">
              <el-switch v-model="addMenuForm.defaultChildrenDevelop">
              </el-switch>
            </el-form-item>

            <el-form-item label="排序" v-if="addMenuForm.type != 2">
              <el-input
                v-model="addMenuForm.sort_index"
                size="small"
                placeholder="数值越小排越前"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <template v-if="addMenuForm.type != 2">
        <chunkTitle title="扩展配置"></chunkTitle>
        <div class="chunk">
          <el-empty description="暂无配置项"></el-empty>
        </div>

        <chunkTitle title="扩展配置"></chunkTitle>
        <div class="chunk">
          <el-empty description="暂无配置项"></el-empty>
        </div>
      </template>
      <div class="overall-flex overall-align-center overall-justify-center">
        <el-button type="primary" round @click="onSubmit">保存</el-button>
        <el-button type="info" round>取消</el-button>
      </div>
    </pageMain>

    <el-dialog title="提示" :visible.sync="rolesDialogShow" width="60%" center>
      <rolesKList slot="footer"></rolesKList>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import pageHeader from "~/page-header/page-header.vue";
import pageMain from "~/page-main/page-main.vue";
import icon from "~/icon/icon.vue";
import chunkTitle from "@/components/chunk-title/chunk-title.vue";
import rolesKList from "~/roles-list/roles-list.vue";
export default {
  components: {
    pageHeader,
    pageMain,
    icon,
    rolesKList,
    chunkTitle,
  },
  mounted() {},

  data() {
    return {
      rolesDialogShow: false,

      // 表单label宽度
      formLabelWidth: "",
      // 表单所有元素大小
      formLabelSize: "small",

      authData: [{}, {}],

      pageParams: {
        pid: null,
        title: "",
        mode: "",
        parentInfo: {},
      },
      // 提交按钮标题
      sumbitButtonTitle: "",
      // 新增菜单配置
      addMenuForm: {
        title: "", // 菜单中文名称
        name: "", // 菜单英文名称
        path: "", // 路径名称
        type: "0", // 菜单类型
        sort_index: null, // 排序index
        component: "", // 文件地址
        icon_nomal: "", // 图标地址
        icon_active: "", // 激活图标地址
        right_arrow_show: false, // 右侧箭头显示
        breadcrumbs_show: true, // 侧边栏显示
        navigator_show: true, // 面包屑显示
        keep_alive: false, // 开启缓存
        redirect_state: false, // 重定向
        redirect_target: 0, // 重定向跳转方式（0：内跳转  1：外页）
        redirect_url: "", // 重定向跳转菜单/网页地址
        redirect_type: "1", // 重定向方式（1菜单重定向  0地址重定向）
        buoy: "",
        defaultChildrenDevelop: false, // 默认展开
      },
    };
  },
  computed: {
    ...mapGetters(["getOriginNavigator"], "overall"),
  },
  methods: {
    ...mapMutations(["addMenuBar"], "overall"),
    onSubmit() {
      console.log(this.addMenuForm);

      this.addMenu();
    },
    HttpPushMenu() {
      // this.$axios
      //   .post(api.mork_navigator_data, {
      //     active: "addMenu",
      //     data: data,
      //   })
      //   .then((result) => {
      //     console.log(result);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
    // 点击添加角色
    clickAddRole() {
      this.rolesDialogShow = true;
    },
    GoBack() {
      this.$router.back();
    },
    // 装载全部角色
    clickAddAllRole() {},

    selectNormalIcon(e) {
      this.addMenuForm.icon_nomal = e.className;
    },
    selectActiveIcon(e) {
      this.addMenuForm.icon_active = e.className;
    },

    // addMenu() {
    //   let { title } = this.addMenuForm.meta;
    //   let list = this.getOriginNavigator;
    //   let ifrepeatName = list
    //     .filter((i) => i.meta.pid == null)
    //     .map((item) => item.meta.title)
    //     .includes(title);
    //   let messageType = "error";
    //   let messageText = "";
    //   if (ifrepeatName) {
    //     messageText = "菜单名称重复";
    //   } else {
    //     messageType = "success";
    //     messageText = "添加菜单成功";
    //     this.addMenuBar({ ...this.addMenuForm });
    //   }
    //   this.$message({
    //     showClose: true,
    //     message: messageText,
    //     type: messageType,
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.chunk {
  background: white;
  margin-bottom: 20px;
  padding: 14px 24px;
}
.base-form {
  width: 400px;
  margin-left: 0px;
}
.form,
.able {
  flex: 1;
}

.form {
}
.form-box {
  padding: 0px 18px;
}

::v-deep .el-form-item {
  margin-bottom: 18px;
}

.footer {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
